Getting Started

Design System Navigation

Getting Started

Welcome to the Adventist Living Pattern System

We are glad you found ALPS. Take a look around, and see what you think. There is lots to explore. You can find the code on Github, check it out, file issues, and create pull requests. This code belongs to the Adventist church. It’s ours!

The Adventist Living Pattern System (ALPS) is a set of design patterns created by the Seventh-day Adventist Church for use around the world by Adventist churches, schools, and organizational units. The purpose of ALPS is to make it easy for our church to create good looking sites that promote the brand of the church, while allowing for individuality and customization of each site.

As you browse through the pages of this site, you will see examples of patterns for different types of pages. From home pages to channel pages, to basic pages, ALPS is designed to be beautiful, fast and flexible, while maintaining a consistent brand across the sites that use it.

Take a look for yourself!

Include It in Your Project

Want to include ALPS in your project? The Adventist church is making the CSS and Javascript needed to build an ALPS site available via a public CDN. All you need to do to implement the latest styles is to link the files provides below and you will be up to date.

Here are the links you need to make it happen.

Include this code in the <head> of your page. This include the fonts, ALPS css, and the Javascript needed to start the page.


<link href="https://fonts.googleapis.com/css?family=Noto+Sans:400,400i,700,700i|Noto+Serif:400,400i,700,700i" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="//cdn.adventist.org/alps/3/latest/css/main.css" media="all">
<script src="//cdn.adventist.org/alps/3/latest/js/head-script.min.js" type="text/javascript"></script>

Include this code in the footer of your page, right before the closing </body> tag.


<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="//cdn.adventist.org/alps/3/latest/js/script.min.js" type="text/javascript"></script>